<template>
	<view class="goods">
		<!-- 导航 -->
		<view class="nav">
			<view class="item" v-for="(item,index) in navList" :key="item.name" @tap="navEvents(index)">
				<view class="name" :class="currentIndex == index ? 'red' : ''">{{ item.name }}</view>
				<view class="icons" v-if="index == 1 || index == 2">
					<uni-icons class="icon" type="top" size="12" color="#FFFFFF" :color="item.selected == 'up' ? 'red' : ''">
					</uni-icons>
					<uni-icons class="icon" type="bottom" size="12" color="#FFFFFF" :color="item.selected == 'down' ? 'red' : ''">
					</uni-icons>
				</view>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="list">
			<view class="item" v-for="item in goodsList" :key="item.id" @tap="goDetail(item.id)">
				<image class="img" :src="item.pic"></image>
				<view class="box">
					<view class="name">{{ item.name }}</view>
					<view class="info">
						<view class="price">￥{{ item.price }}元</view>
						<view class="bufan">不凡</view>
					</view>
				</view>
			</view>
			<view class="none" v-if="goodsList.length == total">
				没有更多数据了
			</view>
		</view>
	</view>
</template>

<script>
	import {
		findProductList
	} from '../../../api/kind/index.js';
	export default {
		data() {
			return {
				goodsList: [], // 商品 - 列表
				start: 1, // 商品 - 当前页
				limit: 5, // 商品 - 限量
				id: '', // 商品 - 二级分类id
				isDesc: 0, // 商品 - 限量  0 默认降序  1 升序
				sortBy: '', // 商品 - 限量  price(价格) sale(销量)
				total: 0, // 商品 - 总数量
				navList: [{
						name: '新品',
						selected: 'default', // default 无颜色 up 上箭头红色 down 下箭头红色
					},
					{
						name: '销量',
						selected: 'default'
					},
					{
						name: '价格',
						selected: 'default'
					},
					{
						name: '筛选',
						selected: 'default'
					}
				], // 导航 - 列表
				currentIndex: 0, // 导航 - 当前文字
			};
		},
		onLoad(options) {
			this.id = options.id;
			this.init();
		},
		// 下拉加载 - 开启
		onPullDownRefresh() {
			// 商品当前页 - 重置
			this.start = 1;
			// 商品列表 - 重置
			this.goodsList = [];
			this.init();
		},
		// 上拉加载 - 开启
		onReachBottom() {
			// 上拉加载 - 停止
			if (this.total > this.goodsList.length) {
				this.init();
			}
		},
		methods: {
			init() {
				// 商品列表
				findProductList(this.start, this.limit, {
					categoryId: this.id,
					isDesc: this.isDesc,
					sortBy: this.sortBy,
				}).then(res => {
					this.total = res.data.data.total;
					// 商品数量 - 增加
					this.goodsList.push(...res.data.data.rows);
					// 下拉加载 - 关闭
					uni.stopPullDownRefresh();
					// 上拉加载 - 下一页
					this.start++;
				})
			},
			// 导航 - 切换
			navEvents(val) {
				// 商品当前页 - 重置
				this.start = 1;
				// 商品列表 - 重置
				this.goodsList = [];
				// 图标颜色 - 重置 - 非当前index的图标
				this.navList.forEach((ele, index) => {
					if (index != val) {
						ele.selected = 'default';
					}
				});
				// 文字颜色 - 切换
				this.currentIndex = val;
				// 图标颜色 - 切换  升序降序
				if (this.navList[val].selected == 'default') {
					this.navList[val].selected = 'up';
					this.isDesc = 1
				} else if (this.navList[val].selected == 'up') {
					this.navList[val].selected = 'down';
					this.isDesc = 0
				} else {
					this.navList[val].selected = 'up';
					this.isDesc = 1
				};
				// 销量价格 - 切换
				if (this.navList[val].name == '销量') {
					this.sortBy = 'sale'
				} else if (this.navList[val].name == '价格') {
					this.sortBy = 'price'
				} else {
					this.sortBy = ''
				}
				this.init();
			},
			// 跳转 - 商品详情页
			goDetail(val){
				uni.navigateTo({
					url:`./detail/detail?id=${val}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss'
</style>
